<template>
  <div class="about">
    <h1>This is an about page</h1>
    <ElButton :type="msg.type" >{{msg.text}}</ElButton>
  </div>
  <p>Basic link button</p>
  <div class="flex justify-space-between mb-4 flex-wrap gap-4">
    <el-button
        v-for="button in buttons"
        :key="button.text"
        :type="button.type"
    >{{ button.text }}</el-button>
  </div>
</template>
<script setup >
/*import {ElButton} from 'element-plus'
export default {
  components:{
    ElButton,
  }
}*/
import {reactive, ref} from "vue";
const msg=reactive({type:'primary',text:'测试'})
const buttons =reactive([
    { type: '', text: 'plain'},
  { type: 'primary', text: 'primary' },
  { type: 'success', text: 'success' },
  { type: 'info', text: 'info' },
  { type: 'warning', text: 'warning'},
  { type: 'danger', text: 'danger'},])


</script>
